<template>
	<el-drawer :visible.sync="visible" size="960px" append-to-body :with-header="false" custom-class="task_detail_drawer">
		<div class="task_detail_head">
			<el-button class="close" icon="el-icon-arrow-right" size="small" circle plain @click="visible = false"></el-button>
			<div class="switch">
				<span class="tit">任务开关</span>
				<el-switch v-model="isEnabled"></el-switch>
			</div>
			<div class="scheme">
				<span class="tit">执行方案</span>
				<el-radio-group v-model="operScheme">
					<el-radio label="1">全天执行</el-radio>
					<el-radio label="2">时段执行</el-radio>
				</el-radio-group>
				<template v-if="operScheme === '2'">
					<span class="tit" style="margin-left: 30px">开始时间</span>
					<el-time-picker
						is-range
						:editable="false"
						v-model="operTimeRange"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						placeholder="选择时间范围"
					></el-time-picker>
				</template>
				<el-button size="small" type="primary">确定</el-button>
			</div>
		</div>
		<el-tabs v-model="activeName" class="task_detail_tab">
			<el-tab-pane label="任务分析" name="taskAnalyse"></el-tab-pane>
			<el-tab-pane label="执行中" name="taskRunning"></el-tab-pane>
			<el-tab-pane label="执行失败" name="taskFailed"></el-tab-pane>
			<el-tab-pane label="启用进程" name="taskProcess"></el-tab-pane>
		</el-tabs>
		<component class="task_detail_body" :is="activeName"></component>
	</el-drawer>
</template>

<script>
import taskAnalyse from './detail/taskAnalyse';
import taskRunning from './detail/taskRunning';
import taskFailed from './detail/taskFailed';
import taskProcess from './detail/taskProcess';
export default {
	components: { taskAnalyse, taskRunning, taskFailed, taskProcess },
	props: {
		value: {
			type: Boolean,
			default: false
		},
		taskId: [String, Number]
	},
	data() {
		return {
			visible: this.value,
			taskInfo: {},
			isEnabled: false,
			operScheme: '2',
			operTimeRange: null,
			activeName: 'taskAnalyse'
		};
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.task_detail_head ::v-deep {
	position: relative;
	padding: 15px;
	border-bottom: solid 1px #ebeef5;
	.el-button.close {
		position: absolute;
		top: 15px;
		right: 15px;
		font-size: 14px;
		padding: 4px;
	}
	.switch {
		display: flex;
		align-items: center;
		line-height: 24px;
		color: #303133;
		span.tit {
			margin-right: 10px;
		}
	}
	.scheme {
		display: flex;
		align-items: center;
		margin-top: 10px;
		span.tit {
			margin-right: 10px;
		}
		.el-button {
			margin-left: 10px;
			padding: 5px 10px;
		}
	}
	.el-radio-group {
		display: flex;
		align-items: center;
	}
	.el-radio {
		display: flex;
		align-items: center;
		margin-right: 15px;
		.el-radio__input {
			font-size: 0;
		}
	}
	.el-date-editor {
		&.el-input__inner {
			display: flex;
			align-items: center;
			width: 240px;
			height: 24px;
			border-radius: 2px;
			padding: 0 5px 0 10px;
			line-height: 1;
		}
		.el-range__icon {
			line-height: 22px;
		}
		.el-range-separator {
			width: 10%;
			line-height: 22px;
		}
		.el-range__close-icon {
			line-height: 22px;
		}
	}
}
.task_detail_tab ::v-deep {
	height: 26px;
	margin: 0 15px;
	.el-tabs__item {
		padding: 0 15px;
	}
}
.task_detail_body {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 0 15px;
	overflow: hidden;
}
</style>
<style lang="scss">
.task_detail_drawer {
	.el-drawer__body {
		display: flex;
		flex-direction: column;
	}
}
</style>
